<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style>
	* {
		margin:0;
		padding: 0;
	}
	table {
		font-size: 12px;
	}

		table a {
			color:#36c;
			text-decoration: none;
		}

		table a:hover {
			color:#f30;
			text-decoration: underline;
		}

	.baobei {
		width:205px;
	}
	.price {
		width: 65px;
		text-align: center;
	}
	.quantity {
		width: 48px;
		text-align: center;
	}
	.after-service {
		width: 68px;
	}
	.amount {
		width: 98px;
		border-left:1px solid #e6e6e6;
		border-right:1px solid #e6e6e6;
		text-align: center;
	}
	.trade-status {
		width: 98px;
		text-align: center;
	}


	.operate {
		width: 82px;
		border-left:1px solid #e6e6e6;
		border-right:1px solid #e6e6e6;
		text-align: center;
	}
	.other {
		width: 58px;
		text-align: right;
	}

	.baobei-img {
		width: 50px;
		height: 50px;
		display: inline;
		float: left;
		border: 1px solid #E9E9E9;
		margin-right: 10px;
	}

		.baobei-img img {
			width: 50px;
			height: 50px;
		}

	table {
		width: 853px;
		border-collapse: collapse;
		table-layout: fixed;

	}

	.colname th {
		height: 33px;
		text-align: center;
		border-top: 1px solid #C4D5E0;
		border-bottom: 1px solid #C4D5E0;
		background: url(http://img03.taobaocdn.com/tps/i3/T1TsCiFjBXXXX2T.s1-84-410.png) repeat-x 0 0;
		font-weight: normal;

	}

	.order-hd {
		height:30px;
		line-height: 30px;
		background-color: rgb(232,242,255);
		margin-top: 2px;
	}
	.order-bd-info {
		border: 1px solid #D4E7FF;
		text-align: center;
	}
	.order-bd-info td {
		padding:8px 5px;
	}

	.order-bd-info .baobei {
		padding-right: 0;
		border-right: 0;
		text-align: start;
	}

	.baobei-desc {
		display: inline;
		float:left;
		width: 180px;
		overflow: hidden;
	}
	.baobei-title {
		display: block;

	}
	.spec {
		color:grey;
	}

	.post-style {
		color:grey;
	}
	.baozhangka {
		width: 52px;
		height: 16px;
		margin-top: 2px;
	}
	.baozhangka img{
		width: 52px;
		height: 16px;
	}
	.order-number {
		padding-left: 10px;
		border: 1px solid #D4E7FF;
	}
	.deal-time,.order-number {
		margin-right: 15px;
	}
	.js-number-selector {
		margin-left: 10px;
	}

	.wangwang {
		background: url(http://img04.taobaocdn.com/tps/i4/T1UPFAXnNfXXXXXXXX-130-60.gif) no-repeat -80px 0;
		width: 20px;
		height: 20px;
		display: inline-block;

	}
		.wangwang span {
			display: none;
		}
	
	.selector {
		width:40px;
	}

	.sep-row {
		height: 5px;
	}

	.order-bd-info a {
		display: block;
	}
	.todo {
		color:#f50;
	}

	.bought-tbody {
		line-height: 1.5;
	}

	.operate .operate-button {
		background: url(http://img03.taobaocdn.com/tps/i3/T1TsCiFjBXXXX2T.s1-84-410.png) no-repeat 0 -104px;
		width: 67px;
		height: 25px;
		line-height: 25px;
		display: inline-block;
		color:#fff;
	}

</style>
</head>

<body>
<div>
	<table class="bought-table">
		<colgroup>
				<col class="selector">
				<col class="baobei">
				<col class="price">
				<col class="quantity">
				<col class="after-service">
				<col class="amount">
				<col class="trade-status">
				<col class="operate">
				<col class="other">
		</colgroup>
		<thead>	
			<tr class="colname">
				<th></th>
				<th class="baobei">宝贝</th>
				<th class="price">单价（元）</th>
				<th class="quantity">数量</th>
				<th class="after-service">售后</th>
				<th class="amount">实付款</th>
				<th class="trade-status">
					<div class="trade-status">
						<select name="trade-status-select" id="J_TradeStatusHandle">
							<option value="ALL">交易状态</option>
							<option value="NOT_PAID">等待买家付款</option>
							<option value="PAID">买家已付款</option>
							<option value="SEND">卖家已发货</option>
							<option value="DROP">交易关闭</option>
						</select>
					</div>
				</th>
				<th class="remark">交易操作</th>
				<th class="other">其他操作</th>
			</tr>
		</thead>
		<tbody class='bought-tbody'>
			<tr class="sep-row">
				<td colspan="9"></td>
			</tr>
			<tr class="order-hd">
				<td colspan="9" class='order-number'>
					<span class="number">
						<label>
							<input type="checkbox" name="##" id="##" class='js-number-selector' >
							订单编号
							<span class="order-num">300400500006000127</span>
						</label>
					</span>
					<span class="deal-time">
						成交时间：2013-09-09 07:24
					</span>
					<span class="seller">
						<a href="###" class='seller-name'>sawsawsaw</a>
						<span>
							<a href="###" class="wangwang">
							<!-- 用意？ -->
								<span>旺旺在线</span>
							</a>
						</span>
					</span>
				</td>
			</tr>
			<tr class="order-bd-info">
				<td class="baobei" colspan="2">
					<a href="##" class='baobei-img'>
						<img src='http://img04.taobaocdn.com/bao/uploaded/i4/10895019682681093/T1Q5hfXy4bXXXXXXXX_!!0-item_pic.jpg_sum.jpg' alt="宝贝">
					</a>
					<div class="baobei-desc">
						<a href="##" class='baobei-title'>【正品保证】人肉带回妹子</a>
						<span>
							<a href="###" title='保障卡' class='baozhangka'><img src="http://img02.taobaocdn.com/tps/i2/T1S4ysXh8pXXXXXXXX-52-16.png" alt="保障卡"></a>
						</span>
						<!-- 为什么要用Div? -->
						<div class="spec">
							<span>套餐：白色</span>
						</div>
					</div>
				</td>

				<td class="price">997.88</td>
				<td class="quantity">1</td>
				<td class="after-service">
					<a href="##" class='refund-status'>退款/退货</a>
					<a href="##" class='tousu-seller'>投诉买家</a>
				</td>
				<td class="amount" rowspan='1'>
					<strong>999.88</strong>
					<p class="post-style">(含公交2.00)</p>
					<a href="###" title='手机订单'>
						<img src="http://img01.taobaocdn.com/tps/i1/T1xRBqXdNAXXXXXXXX-46-16.png" alt="">
					</a>
				</td>
				<td class="trade-status">
					<a href="##" class='todo'>卖家已发货</a>
					<a href='##'>订单详情</a>
					<a href="##">查看物流</a>
				</td>
				<td class="operate">
					<span class="skin-blue">
						<a href="##" title='确认收货' class='operate-button'>确认收货</a>
					</span>
				</td>
				<td class="other">
					<a href="##">删除</a>
					<div class="ishare">
						<a href="##">分享</a>
					</div>
				</td>
			</tr>
		</tbody>

		<tbody class='bought-tbody'>
			<tr class="sep-row">
				<td colspan="9"></td>
			</tr>
			<tr class="order-hd">
				<td colspan="9" class='order-number'>
					<span class="number">
						<label>
							<input type="checkbox" name="##" id="##" class='js-number-selector' >
							订单编号
							<span class="order-num">42254545454545454545</span>
						</label>
					</span>
					<span class="deal-time">
						成交时间：2013-09-09 07:24
					</span>
					<span class="seller">
						<a href="###" class='seller-name'>sawsawsaw</a>
						<span>
							<a href="###" class="wangwang">
							<!-- 用意？ -->
								<span>旺旺在线</span>
							</a>
						</span>
					</span>
				</td>
			</tr>
			<tr class="order-bd-info">
				<td class="baobei" colspan="2">
					<a href="##" class='baobei-img'>
						<img src='http://img04.taobaocdn.com/bao/uploaded/i4/10895019682681093/T1Q5hfXy4bXXXXXXXX_!!0-item_pic.jpg_sum.jpg' alt="宝贝">
					</a>
					<div class="baobei-desc">
						<a href="##" class='baobei-title'>（非卡号）重庆联通沃3g手机卡无限流量20元包2000M本地流量</a>
						<span>
							<a href="###" title='保障卡' class='baozhangka'><img src="http://img02.taobaocdn.com/tps/i2/T1S4ysXh8pXXXXXXXX-52-16.png" alt="保障卡"></a>
						</span>
						<!-- 为什么要用Div? -->
						<div class="spec">
							<span>套餐：重庆联通专用</span>
						</div>
					</div>
				</td>

				<td class="price">7.88</td>
				<td class="quantity">1</td>
				<td class="after-service">
					<a href="##" class='refund-status'>退款/退货</a>
					<a href="##" class='tousu-seller'>投诉买家</a>
				</td>
				<td class="amount" rowspan='1'>
					<strong>7.88</strong>
					<p class="post-style">(含平邮0.00)</p>
					<a href="###" title='手机订单'>
						<img src="http://img01.taobaocdn.com/tps/i1/T1xRBqXdNAXXXXXXXX-46-16.png" alt="">
					</a>
				</td>
				<td class="trade-status">
					<a href="##" class='todo'>卖家已发货</a>
					<a href='##'>订单详情</a>
					<a href="##">查看物流</a>
				</td>
				<td class="operate">
					<span class="skin-blue">
						<a href="##" title='确认收货' class='operate-button'>确认收货</a>
					</span>
				</td>
				<td class="other">
					<a href="##">删除</a>
					<div class="ishare">
						<a href="##">分享</a>
					</div>
				</td>
			</tr>
		</tbody>
	
	
	</table>


	<!-- <table width="100%" border="1">
		<colgroup align="left">
		  	<col>
		</colgroup>
		<colgroup align="right" style="color:#0000FF;background-color:#456;">
			
		</colgroup>

		<tr class="sep-row">
			<td rowspan="3"></td>
		</tr>
		<tr>
			<th>ISBN</th>
			<th>Title</th>
			<th>Price</th>
		</tr>
		<tr>
			<td>3476896</td>
			<td>My first HTML</td>
			<td>$53</td>
		</tr>
		
	</table> -->

</div>
</body> 
</html>